<html>
<head>
	<script	src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
	<script src='js/common.js' type='text/javascript'></script>
	<link href='css/style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript">
	  var jauneSympa = [255, 221, 0];
	  var vertSympa = [102, 204, 0];
	  var bleuSympa = [0, 153, 255];
	  var rougeSympa = [255, 51, 0];
      var appliSize = 160;
      var appliHeight = 33;
      var interLigne = 30;
      var interColonne = 30;
      var canvas;
      var backCanvas;
      var currentAppliId = -1;      
      var appliList = [];
      var ligneList = [];
      var dep;
      var appliCacheAlpha = 0.2;
      var depMax = 5;
      var depLevelMax = depMax;
      var lineColorMax = rougeSympa;
      var lineColorMin = vertSympa;
      var dragInfo = {
    		  id : -1,
    		  startX : 0,
    		  starty : 0,
    		  x : 0,
    		  y : 0,
    		  enCours : false
      }
      var canvasTop;
      var canvasLeft;
      
      function getAppliId(x, y){
      	var backCtx = backCanvas.getContext('2d');
      	var imgd = backCtx.getImageData(x, y, 1, 1);
      	return imgd.data[0]-1;
      }
      
      function clear(){
     	var ctx = canvas.getContext('2d');
       	ctx.clearRect(0,0,canvas.width,canvas.height);
     	var backCtx = backCanvas.getContext('2d');
     	backCtx.clearRect(0,0,canvas.width,canvas.height);
      }
      
      function clearDep() {
         	$.each(appliList, function(index2, appliCurrent) { 
           		appliCurrent.etat = "NORMAL"
    			appliCurrent.depList = []
           	});
      }
      
      function getColorLine(gradientLevel) {
    	  var redStep = (lineColorMax[0] - lineColorMin[0])/(depMax-1);
    	  var blueStep = (lineColorMax[1] - lineColorMin[1])/(depMax-1);
    	  var greenStep = (lineColorMax[2] - lineColorMin[2])/(depMax-1);
    	  var red = lineColorMax[0] - Math.floor(redStep*gradientLevel);
    	  var blue = lineColorMax[1] - Math.floor(blueStep*gradientLevel);
    	  var green = lineColorMax[2] - Math.floor(greenStep*gradientLevel);
    	  return "rgb("+red+","+blue+","+green+")";
      }
      
      function drawAll() {
    	clear();
      	$.each(ligneList, function(index, ligne) { 
        	drawLine(ligne.start, ligne.end, ligne.epaisseur);
    	});
      	$.each(appliList, function(index, value) { 
        	drawAppli(value);
    	});

      }
      
      function getAppliByName(appliName) {
        	var found;
    	  	$.each(appliList, function(index, value) { 
         		if(value.name == appliName) {
         			found = value;
        		}
        	}); 
    	  	return found;
      }
      
      function drawLine(application1, application2, epaisseur) {
    	  var ctx = canvas.getContext('2d');
          ctx.save();
       	  ctx.shadowColor = "#aaa";
          ctx.shadowBlur = 6;
          ctx.shadowOffsetX = 1;
          ctx.shadowOffsetY = 1;
    	  ctx.strokeStyle  = "rgba(0, 0, 0, 0.5)";
    	  ctx.lineWidth = epaisseur+2;
    	  ctx.beginPath();  
    	  ctx.moveTo(application1.x + (appliSize /2),application1.y + (appliHeight /2));  
    	  ctx.quadraticCurveTo(application1.x + (appliSize /2),application2.y + (appliHeight /2),application2.x + (appliSize /2),application2.y + (appliHeight /2))
    	  //ctx.lineTo();    
    	  //ctx.closePath();
    	  ctx.stroke(); 
          ctx.restore();
    	  
    	  ctx.lineWidth = epaisseur;
          ctx.strokeStyle  = getColorLine(epaisseur);
    	  ctx.beginPath();  
    	  ctx.moveTo(application1.x + (appliSize /2),application1.y + (appliHeight /2));  
    	 // ctx.lineTo(application2.x + (appliSize /2),application2.y + (appliHeight /2));  
    	  ctx.quadraticCurveTo(application1.x + (appliSize /2),application2.y + (appliHeight /2),application2.x + (appliSize /2),application2.y + (appliHeight /2))
    	 // ctx.closePath();
    	  ctx.stroke(); 
      }
      
      function drawAppli(appli) {

          var backCtx = backCanvas.getContext('2d');
          backCtx.fillStyle = "rgb("+appli.id+",0,0)";
          backCtx.fillRect (appli.x, appli.y, appliSize, appliHeight);
    	  
          var ctx = canvas.getContext('2d');
          ctx.save();
        
       	  ctx.shadowColor = "#aaa";
          ctx.shadowBlur = 6;
          ctx.shadowOffsetX = 1;
          ctx.shadowOffsetY = 1;
          if(appli.etat == "DEPENDANCE") {
        	  var lingrad = ctx.createLinearGradient(appli.x,appli.y,appli.x,appli.y+appliHeight);
        	  lingrad.addColorStop(0, 'rgba(85,85,85,1)');
        	  lingrad.addColorStop(0.75, 'rgba(37,37,37,0.75)');
        	  lingrad.addColorStop(1, 'rgba(20,20,2,0.5)');
        	  ctx.fillStyle = lingrad;
        	  ctx.fillRect (appli.x, appli.y, appliSize, appliHeight);
        	  ctx.restore(); 
              ctx.fillStyle = "rgba(255, 255, 255, 1)";
              ctx.font = "bold 13px Arial";
              metrics = ctx.measureText(appli.name);
              ctx.fillText(appli.name, appli.x + ((appliSize - metrics.width)/2 ), appli.y +20);
          } 
          if(appli.etat == "NORMAL") {
        	  var lingrad = ctx.createLinearGradient(appli.x,appli.y,appli.x,appli.y+appliHeight);
        	  lingrad.addColorStop(0, 'rgba(255,235,0,1)');
        	  lingrad.addColorStop(0.75, 'rgba(255,224,0,.75)');
        	  lingrad.addColorStop(1, 'rgba(255,216,0,0.5)');
        	  ctx.fillStyle = lingrad;
        	  ctx.fillRect (appli.x, appli.y, appliSize, appliHeight);
        	  ctx.restore(); 
              ctx.fillStyle = "rgba(0, 0, 0, 1)";
              ctx.font = "bold 13px Arial";
              metrics = ctx.measureText(appli.name);
              ctx.fillText(appli.name, appli.x + ((appliSize - metrics.width)/2 ), appli.y +20);
          } 
          if(appli.etat == "CACHE") {
        	  var lingrad = ctx.createLinearGradient(appli.x,appli.y,appli.x,appli.y+appliHeight);
        	  ctx.globalAlpha = appliCacheAlpha; 
        	  lingrad.addColorStop(0, 'rgb(255,235,0)');
        	  lingrad.addColorStop(0.75, 'rgb(255,224,0)');
        	  lingrad.addColorStop(1, 'rgb(255,216,0)');
        	  ctx.fillStyle = lingrad;
        	  ctx.fillRect (appli.x, appli.y, appliSize, appliHeight);
              ctx.fillStyle = "rgb(0, 0, 0)";
              ctx.font = "bold 13px Arial";
              metrics = ctx.measureText(appli.name);
              ctx.fillText(appli.name, appli.x + ((appliSize - metrics.width)/2 ), appli.y +20);
              ctx.restore(); 
           }
      }
      
      function drawDep(appli , depList) {
    	if(appli === undefined) {return;}
  		$.each(appliList, function(index, appliCurrent) { 
			if(appliCurrent.etat != "DEPENDANCE" ) {
	   			if(dep[appli.name] !== undefined && $.inArray(appliCurrent.name, dep[appli.name]) != -1){
   					appliCurrent.etat = "DEPENDANCE";
   					ligneList.push({
   						start : getAppliByName(appli.name),
   						end : getAppliByName(appliCurrent.name),
   						epaisseur : depMax - depList.length
   					})
   					var myList = depList.slice(0); 
   					myList.push(appli);
   					appliCurrent.depList = myList;
	   			} else {
	   				appliCurrent.etat = "CACHE";
	       		}
  			}
   		});
      }
      
      function createAppli(name){
    	var dejaCree = false;
    	var appli;
  		$.each(appliList, function(index, appliCurrent) { 
			if(appliCurrent.name == name){
				dejaCree = true;
				appli = appliCurrent;
			}
		});  
  		if(!dejaCree) {
	    	var id = appliList.length;
	    	var ligne = id % 5;
	        var colonne = ( id - ligne ) / 5;
			appli = {
				name : name,
				x : 10 + (ligne*(appliSize+interColonne)),
				y : 10 + (colonne*(appliHeight+interLigne)),
				id : id+1, 
				etat : "NORMAL",
				depList : []
			}
			appliList.push(appli);
  		}
		return appli;
      }
      
      function showInfo(appli) {
    	  $("div#message").empty();
    	  $.each(appli.depList, function(index, value) { 
    		  $("div#message").append(value.name + "<br>")
    	  });
      }
          
      function draw(data){
        canvas = document.getElementById('tutorial');
        backCanvas = document.getElementById('backBuffer');
        appliList = [];
        ligneList = [];
        if (canvas.getContext){
       		dep = data
           	$.each(data, function(appliParent, depList) {
           		createAppli(appliParent);
            	$.each(depList, function(index2, value) { 
                	createAppli(value);
            	});
           	});
          	clear();
           	drawAll();
        }
      }
        
      function calculDep() {
    	var appli  = appliList[currentAppliId];
    	if(appli === undefined){return;}
   	  	clear();
   		clearDep();
   		ligneList = [];
   		drawDep(appli, []);
   		var appliTraite = 1;
   		var niveau = 1;
   		while (appliTraite != 0 && depLevelMax > niveau) {
   			appliTraite = 0;
       		$.each(appliList, function(index, appliCurrent) { 
       			if(appliCurrent.depList.length == niveau){
       				drawDep(appliCurrent, appliCurrent.depList);
       				appliTraite++;
       			}
       		});  
       		niveau++;
   		}
      	appli.etat = "NORMAL";
      		
       	drawAll();
      }
        function start(){
     	
      	  $.getJSON('ajax/dep.json', function(data) {
      	   	draw(data);
      	  });
        
        $("#tutorial").mousedown(function(event){
            canvasTop  = $("#tutorial").offset().top;
            canvasLeft  = $("#tutorial").offset().left;
        	dragInfo.startX = event.pageX + canvasLeft;
        	dragInfo.startY = event.pageY - canvasTop;
        	dragInfo.x = event.pageX + canvasLeft;
        	dragInfo.y = event.pageY - canvasTop;
        	var id = getAppliId( event.pageX + canvasLeft, event.pageY - canvasTop);
        	dragInfo.enCours = (id !=-1);
        	dragInfo.id = id;
        });
        
        $("#tutorial").mouseup(function(event){
            canvasTop  = $("#tutorial").offset().top;
            canvasLeft  = $("#tutorial").offset().left;
        	var x = dragInfo.startX - (event.pageX + canvasLeft);
        	var y = dragInfo.startY - (event.pageY - canvasTop);
        	dragLength = Math.abs(x)+Math.abs(y)
        	dragInfo.enCours = false;
        	if(dragLength < 5) {
   	        	var id = getAppliId( event.pageX + canvasLeft, event.pageY - canvasTop);
   	       		if(id != -1){
   	        		currentAppliId = id;
   	        		calculDep();
   	       		}
        	}
        });
        
        $("#tutorial").mousemove(function(event){
            canvasTop  = $("#tutorial").offset().top;
            canvasLeft  = $("#tutorial").offset().left;
        	if(dragInfo.enCours) {
            	var appli  = appliList[dragInfo.id];
            	var x = dragInfo.x - (event.pageX  + canvasLeft);
            	var y = dragInfo.y - (event.pageY - canvasTop);
            	appli.x -= x;
            	appli.y -= y;
            	drawAll();
            	dragInfo.x = event.pageX + canvasLeft ;
            	dragInfo.y = event.pageY - canvasTop;
        	}
        	var id =getAppliId( event.pageX + canvasLeft, event.pageY - canvasTop);
        		if(id != -1){
        			showInfo(appliList[id]);
        			document.body.style.cursor = 'hand'
        		} else {
        			document.body.style.cursor = 'default'
        		}
        });
        
        $("div.voir").click(function(){
        	draw(eval("(" + $("textarea#textarea").val() +")"));
        })
        
        $('li.level').each(function(index) {
             $(this).css('backgroundColor',getColorLine(depMax -index));
             $(this).click({index: index}, function(event){
            	 depLevelMax = index+1;
            	 calculDep();
                 $('li.level').css('backgroundColor', function(index) {
	               	  if(index+1 > depLevelMax) {
	               		  return "#FFF";
	               	  } else {
	               		return getColorLine(depMax -index)
	               	  }
                });
             });

        });
        
      }
    </script>
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

canvas {
	position: absolute;
	left: 0px;
}

canvas#backBuffer {
	display: none;
}

div#message {
	height: 700px;
	width: 100px;
	float: left;
}

div#canvas {
	height: 100px;
	width: 1000px;
	float: left;
}
ul {
	float: left;
	list-style-type:none;
}
li.top {
	border-top: 1px solid #555555;
}
li.level {
	border-right: 1px solid #555555;
	border-left: 1px solid #555555;
	border-bottom: 1px solid #555555;
	height: 20px;
	width: 20px;
	background-color: #F00;
	box-shadow: 1px 1px 6px #aaa;
}
</style>
<script src='../js/googleAnalytics.js' type='text/javascript'></script>
</head>
<body onload="start();">
	<div id="header"></div>
	<div id="canvas">
		<canvas id="tutorial" width="1000" height="700"></canvas>
		<canvas id="backBuffer" width="1000" height="700"></canvas>
	</div>
	<div id="message"></div>
	<textarea id="textarea"></textarea>
	<div class="voir">Voir</div>
	<ul>
	<li class="level top"></li>
	<li class="level"></li>
	<li class="level"></li>
	<li class="level"></li>
	<li class="level"></li>
	<li class="level"></li>
	</ul>
</body>
</html>

